
<!DOCTYPE html>
<html>
<head>
    <title>登录</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="/res/css/bootstrap.min.css">

    <script src="/res/js/jquery.min.js"></script>
    <script src="/res/js/popper.min.js"></script>
    <script src="/res/js/bootstrap.min.js"></script>
    <style type="text/css">
        .overall{
            background: #F0F2F5;
        }
        .login{
            position: relative;top: 50%;transform: translateY(-50%);
            width: 460px;

        }
        .login_boy{
            background: #FFFFFF;text-align: left;
            border-radius: 10px;
            border: 0px;padding: 10px 30px 20px 30px;
        }
        .footer p{
            margin-bottom: 0px;
            font-size: 14px;
            color: #666666;
        }
        .login_boy .nav-tabs .nav-item{
            width: 50%;
            text-align: center;
        }
        .login_boy .nav-tabs .nav-link{
            font-size: 16px;
            font-weight: 700;
            color: #495057;
        }
        .login_boy .nav-tabs .nav-link:hover{
            border: 0px;
        }
        .login_boy .nav-tabs .active{
            border: 0px;
            color: #0079FE;
            border-bottom: #0079FE 2px solid;
        }
        .login_boy .nav-tabs .active:hover{
            border: 0px;color: #0079FE;
            border-bottom: #0079FE 2px solid;
        }
        .logo{
            text-align: center;
            height: 60px;
        }
        .logo img{
            width: 130px;
            height: 130px;
            position: absolute;
            padding: 10px;
            background: white;
            left: 0px;
            right: 0px;
            top: -15%;
            margin: 0px auto;
        }
        form{
            font-size: 14px;color: #666666;
        }
        .form-control{
            font-size: 14px;
        }

    </style>
    <script type="text/javascript">
        $(function(){
            var height=$(window).height();
            $(".overall").height(height);
        })
    </script>
</head>
<body>
<div class="overall" align="center">
    <div class="login">
        <div class="card login_boy">
            <div class="card-body">
                <div class="logo">
                    <img src="/res/img/logo.jpg" alt="John Doe" class="rounded-circle">
                </div>
                <ul class="nav nav-tabs" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" data-toggle="tab" href="#home">账号登录</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-toggle="tab" href="#menu1">账号注册</a>
                    </li>
                </ul>
                <div class="tab-content">
                    <div id="home" class="container tab-pane active p-0"><br>
                        <form>
                            <div class="form-group">
                                <label for="email">账号:</label>
                                <input type="text" class="form-control" id="emails" placeholder="请输入账号">
                            </div>
                            <div class="form-group">
                                <label for="pwds">密码:</label>
                                <input type="password" class="form-control" id="pwds" placeholder="请输入密码">
                            </div>
                            <div class="form-check">
                                <label class="form-check-label">
                                    <input class="form-check-input" type="checkbox"> 记住登录状态
                                </label>
                            </div>
                            <button type="submit" class="btn btn-primary mt-3" style="width: 100%;">登录</button>
                        </form>
                    </div>
                    <div id="menu1" class="container tab-pane fade p-0"><br>
                        <form>
                            <div class="form-group">
                                <label for="email">用户名:</label>
                                <input type="email" class="form-control" id="email" placeholder="请输入用户名">
                            </div>
                            <div class="form-group">
                                <label for="pwda">密码:</label>
                                <input type="password" class="form-control" id="pwda" placeholder="请输入密码">
                            </div>
                            <div class="form-group">
                                <label for="email">邮箱:</label>
                                <input type="email" class="form-control" id="eamil" placeholder="请输入邮箱">
                            </div>
                            <div class="form-group">
                                <label for="phone">手机号码:</label>
                                <input type="text" class="form-control" id="phone" placeholder="请输入手机号码">
                            </div>
                            <button type="submit" class="btn btn-primary mt-3" style="width: 100%;">注册</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>